import React from 'react';
import { Card, Radio, Spin } from 'antd';
import { Line } from '@ant-design/charts';
import { borrowTrend } from '@/services/Workbench';
import { STATIC } from '@/services/config';
import config from './config';
import styles from './index.less';

class Circulation extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      radioValue: 3,
      redioOptions: STATIC.dateType.map((item) => {
        return {
          label: item.name,
          value: item.value
        }
      }),
      isLoading: false,
      config: { ...config }
    };
  }

  /* readio 切换监听 */
  onChange = (e) => {
    const value = e.target.value;
    this.setState({ radioValue: value });
    this.getBorrowTrend(value)
  }

  /* 获取流通率数据 */
  getBorrowTrend = async (type = 1) => {
    try {
      const data = this.state.config;
      this.setState({ isLoading: true });
      const res = await borrowTrend(type);
      const borrow = (res.status1 || []).map((item) => {
        return {
          name: '借',
          time: item.borrowDate,
          value: item.borrowCount
        }
      })
      const back = (res.status2 || []).map((item) => {
        return {
          name: '还',
          time: item.borrowDate,
          value: item.borrowCount
        }
      })
      data.data = [...borrow, ...back]
      this.setState({ config: data })
    } catch (e) {
      console.error(e);
    } finally {
      this.setState({ isLoading: false });
    }
  }

  componentDidMount() {
    this.getBorrowTrend();
  }

  render() {
    const data = this.state.config;
    const isLoading = this.state.isLoading;
    const radioValue = this.state.radioValue;
    const redioOptions = this.state.redioOptions;

    return (
      <Spin spinning={isLoading}>
        <Card
          style={{ marginBottom: 24 }}
          title="借阅趋势"
          bordered={false}
          extra={
            <Radio.Group
              optionType="button"
              value={radioValue}
              options={redioOptions}
              onChange={this.onChange} />
          }
          bodyStyle={{ padding: 0 }}>
          <Line className={styles.circulationBox} {...data} />
        </Card>
      </Spin>
    )
  }
}

export default Circulation
